<template>
  <div class="box">
    <div class="box-header">
      <span class="title pos-left">{{title}}</span>
    </div>
    <div class="box-body">
      <div class="chart fullsize" id="chart-cvm-prearrange"></div>
      <x-loading :show="showLoading"></x-loading>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import echarts from "echarts";
import Loading from "@/components/Loading";

export default {
  name: "",
  data() {
    return {
      showLoading: false,
      option: null,
      chartInstance: null
    };
  },
  props: {
    title: String
  },
  components: {
    "x-loading": Loading
  },
  mounted() {
    this.renderChart();
  },
  methods: {
    renderChart() {
      this.showLoading = true;
      axios
        .get(
          this.URLHEAD_AGENT +
            "http://jingwuyun.yihuangis.com:9999/xfweb/Unit/findByStatInfo"
        )
        .then(res => {
          let json = res.data;
          this.option = {
            tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
            grid: { top: "15%", right: "3%", left: "5%", bottom: "12%" },
            xAxis: [
              { type: "category", data: [ "图纸", "熟悉", "演练", "监控", "预案", "物联网"], axisLine: { lineStyle: { color: "rgba(255,255,255,0.12)" } }, axisLabel: { margin: 10, color: "#e2e9ff", textStyle: { fontSize: 14 } } }
            ],
            yAxis: [
              { axisLabel: { formatter: "{value}", color: "#e2e9ff" }, axisLine: { show: false }, splitLine: { lineStyle: { color: "rgba(255,255,255,0.12)" } } }
            ],
            series: [
              {
                type: "bar",
                data: json[0],
                barWidth: "20px",
                itemStyle: {
                  normal: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ { offset: 0, color: "rgba(0,244,255,1)"  }, { offset: 1, color: "rgba(0,77,167,1)"  } ], false ), barBorderRadius: [30, 30, 30, 30], shadowColor: "rgba(0,160,221,1)", shadowBlur: 4 }
                },
                label: {
                  normal: {
                    show: true,
                    lineHeight: 30,
                    width: 80,
                    height: 30,
                    backgroundColor: "rgba(0,160,221,0.1)",
                    borderRadius: 200,
                    position: ["-8", "-60"],
                    distance: 1,
                    formatter: [
                      "    {d|●}",
                      " {a|{c}个}     \n",
                      "    {b|}"
                    ].join(","),
                    rich: {
                      d: {
                        color: "#3CDDCF"
                      },
                      a: {
                        color: "#fff",
                        align: "center"
                      },
                      b: {
                        width: 1,
                        height: 30,
                        borderWidth: 1,
                        borderColor: "#234e6c",
                        align: "left"
                      }
                    }
                  }
                }
              }
            ]
          };
          this.$Crender("chart-cvm-prearrange", this.option);
          this.showLoading = false;
        });
    }
  }
};
</script>

<style lang="" scoped>
</style>